<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <title>MyHome</title>
        <link rel="shortcut icon" href="#" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <style type="text/css">
            :root {
                --header-size: 4rem;
                --sidebar-size: 16rem;
            }

            body {
            }

            .header {
                min-height: var(--header-size);
            }

            .fixed-header {
                /* padding-top: var(--header-size); */
            }
            
            .content {

            }

            .sidebar {
                float: left;
                top: 0;
                bottom: 0;
                width: var(--sidebar-size);
                min-height: calc(100vh - var(--header-size));
                height: auto;
                z-index: 995;
                padding: 0;
                overflow-y: auto;
            }

            .sidebar-content {
                position: fixed;
                display: flex;
                width: inherit;
                padding: 0.5rem;
                height: 50rem;
                min-height: calc(100vh - var(--header-size));
                overflow-y: auto;
            }

        </style>
    </head>
    <body>
        <header id="header-1" class="header sticky-top d-flex align-items-center navbar-dark bg-dark shadow-sm p-0" >
            <nav id="nav-header" class="navbar shadow-md navbar-expand-md navbar-dark bg-dark w-100 p-1">
                <a class="logo navbar-brand align-items-center" href="http://localhost:8080/home/">
                    <img class="" src="http://localhost:8080/home/assets/logo">
                    <span class="navbar-brand">Creative Solutions</span>
                </a>

                <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-1-items" aria-controls="header-1-items" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div id="header-1-items" class="collapse navbar-collapse">
                    <ul class="navbar-nav mr-auto d-flex mb-2 mb-md-0">
                        <li class="nav-item">
                            <a href="" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">About</a>
                        </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">User</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <div class="container">
            <div id="content" class="row content flex-nowrap">
                    <aside id="sidebar" class="sidebar d-md-block d-none text-white bg-dark">
                        <div id="sidebar-content" class="sidebar-content list-group text-sm-start">
                            <p> Links1 </p>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-bootstrap"></i> <span>Item jhkjh kjhk jhlkj hkl jhkl jh</span> </a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-film"></i> <span>Item</span></a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-heart"></i> <span>Item</span></a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-bricks"></i> <span>Item</span></a>
                            <p> Links2 </p>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-clock"></i> <span>Item</span></a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-archive"></i> <span>Item</span></a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-gear"></i> <span>Item</span></a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-calendar"></i> <span>Item</span></a>
                            <a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><i class="bi bi-envelope"></i> <span>Item</span></a>
                        </div>
                    </aside>

                    <main id="main" class="col">
                        <main id="main-content" class="">
                          <div class="card shadow-sm" id="card-2">
                                <h5 class="card-header" id="card-2-header">Login</h5>
                                <div class="card-body collapse show" aria-labelledby="card-2-header" id="card-2-body">
                                    <form method="post" action="http://localhost:8080/home/login/form-3" enctype="multipart/form-data" id="form-3" name="form-3">
                                        <label class="form-label" for="username" >Username</label>
                                        <input class="form-control" id="username" name="username" placeholder="Type user name" type="text" >
                                        <label class="form-label" for="password" >Password</label>
                                        <input class="form-control" id="password" name="password" placeholder="" type="password" >
                                        <div class="form-text">You need to use numbers</div>
                                        <br>
                                        <input type="hidden" name="execute" value="true">
                                    </form>
                                    <button class="btn btn-success" type="submit" form="form-3" value="Submit">Submit</button>
                                    <button class="btn btn-primary" type="reset" form="form-3" value="Reset">Reset</button>
                                </div>
                            </div>
                          <div class="card shadow-sm" id="card-2">
                                <h5 class="card-header" id="card-2-header">Login</h5>
                                <div class="card-body collapse show" aria-labelledby="card-2-header" id="card-2-body">
                                    <form method="post" action="http://localhost:8080/home/login/form-3" enctype="multipart/form-data" id="form-3" name="form-3">
                                        <label class="form-label" for="username" >Username</label>
                                        <input class="form-control" id="username" name="username" placeholder="Type user name" type="text" >
                                        <label class="form-label" for="password" >Password</label>
                                        <input class="form-control" id="password" name="password" placeholder="" type="password" >
                                        <div class="form-text">You need to use numbers</div>
                                        <br>
                                        <input type="hidden" name="execute" value="true">
                                    </form>
                                    <button class="btn btn-success" type="submit" form="form-3" value="Submit">Submit</button>
                                    <button class="btn btn-primary" type="reset" form="form-3" value="Reset">Reset</button>
                                </div>
                            </div>
                          <div class="card shadow-sm" id="card-2">
                                <h5 class="card-header" id="card-2-header">Login</h5>
                                <div class="card-body collapse show" aria-labelledby="card-2-header" id="card-2-body">
                                    <form method="post" action="http://localhost:8080/home/login/form-3" enctype="multipart/form-data" id="form-3" name="form-3">
                                        <label class="form-label" for="username" >Username</label>
                                        <input class="form-control" id="username" name="username" placeholder="Type user name" type="text" >
                                        <label class="form-label" for="password" >Password</label>
                                        <input class="form-control" id="password" name="password" placeholder="" type="password" >
                                        <div class="form-text">You need to use numbers</div>
                                        <br>
                                        <input type="hidden" name="execute" value="true">
                                    </form>
                                    <button class="btn btn-success" type="submit" form="form-3" value="Submit">Submit</button>
                                    <button class="btn btn-primary" type="reset" form="form-3" value="Reset">Reset</button>
                                </div>
                            </div>
                          <div class="card shadow-sm" id="card-2">
                                <h5 class="card-header" id="card-2-header">Login</h5>
                                <div class="card-body collapse show" aria-labelledby="card-2-header" id="card-2-body">
                                    <form method="post" action="http://localhost:8080/home/login/form-3" enctype="multipart/form-data" id="form-3" name="form-3">
                                        <label class="form-label" for="username" >Username</label>
                                        <input class="form-control" id="username" name="username" placeholder="Type user name" type="text" >
                                        <label class="form-label" for="password" >Password</label>
                                        <input class="form-control" id="password" name="password" placeholder="" type="password" >
                                        <div class="form-text">You need to use numbers</div>
                                        <br>
                                        <input type="hidden" name="execute" value="true">
                                    </form>
                                    <button class="btn btn-success" type="submit" form="form-3" value="Submit">Submit</button>
                                    <button class="btn btn-primary" type="reset" form="form-3" value="Reset">Reset</button>
                                </div>
                            </div>
                          <div class="card shadow-sm" id="card-2">
                                <h5 class="card-header" id="card-2-header">Login</h5>
                                <div class="card-body collapse show" aria-labelledby="card-2-header" id="card-2-body">
                                    <form method="post" action="http://localhost:8080/home/login/form-3" enctype="multipart/form-data" id="form-3" name="form-3">
                                        <label class="form-label" for="username" >Username</label>
                                        <input class="form-control" id="username" name="username" placeholder="Type user name" type="text" >
                                        <label class="form-label" for="password" >Password</label>
                                        <input class="form-control" id="password" name="password" placeholder="" type="password" >
                                        <div class="form-text">You need to use numbers</div>
                                        <br>
                                        <input type="hidden" name="execute" value="true">
                                    </form>
                                    <button class="btn btn-success" type="submit" form="form-3" value="Submit">Submit</button>
                                    <button class="btn btn-primary" type="reset" form="form-3" value="Reset">Reset</button>
                                </div>
                            </div>
                        </div>
                    </main>
            </div>
        </div>
    </body>
</html>
